
<h2>jack framework introduction</h2>

<div>
  <pre>
    this document will show you  how to use the components
    its goal is to realise a framework that is easy to use and the programmer like to use.
  </pre>
  <div>
    <p>first: button</p>
    <p>introduction: button is always make a request, so this button has ability to send a request</p>
    <jack-button [conf]="conf">this is a button sample</jack-button>
    ```
    ```
  </div>
</div>
<!-- NG-ZORRO -->
<!-- <a href="https://github.com/NG-ZORRO/ng-zorro-antd" target="_blank" style="display: flex;align-items: center;justify-content: center;height: 100%;width: 100%;">
  <img height="300" src="https://img.alicdn.com/tfs/TB1X.qJJgHqK1RjSZFgXXa7JXXa-89-131.svg">
</a> -->
<!-- <i nz-icon nzType="down" nzTheme="outline"></i>
<div nz-row>
  <div nz-col nzSpan="12"> col</div>
  <div nz-col nzSpan="12"> col</div>
</div> -->
<!-- <span #tooltipbtn nz-tooltip nzTooltipTitle="thuis is nz tooltip title"> this is tooltio</span> -->

<!-- <button (click)="tooltipbtn.show()">show tooltip</button> -->
<!-- <app-jack   [conf]="conf" [text]="title">
  <ng-template #title>
    <button>hello</button>
  </ng-template>
</app-jack> -->
<!-- <ng-template [ngIf]="show"> -->
  <!-- <app-jack   [conf]="conf" [text]="title">
    <ng-template #title>
      <button>hiiiiiello</button>
    </ng-template>
  </app-jack> -->


<jack-input [conf]="inputconf" [(ngModel)]="aa">
  <div label> hello </div>
</jack-input>
{{aa}}

<jack-button (click)="opensheet()">click to open sheet</jack-button>
<jack-bottom-sheet #btsheet1>
  <jack-bottom-sheet-item>hello
    
    <jack-button>this is jack button</jack-button>
    world. do you like soemthing?</jack-bottom-sheet-item>
  <jack-bottom-sheet-item>hello world. do you like soemthing?</jack-bottom-sheet-item>
  <jack-bottom-sheet-item>hello world. do you like soemthing?</jack-bottom-sheet-item>
  <jack-bottom-sheet-item>hello world. do you like soemthing?</jack-bottom-sheet-item>
  <jack-bottom-sheet-item>hello world. do you like soemthing?</jack-bottom-sheet-item>
</jack-bottom-sheet>

<!-- <jack-list>
  <div jack-list-item *ngFor="let item of list">
    {{item.name}}
    <div ngProjectAs="jack-list-title">{{item.name}}</div>
  </div>
</jack-list> -->


<jack-modal #modal1>
  <div ngProjectAs="modal-header">
    this is header
  </div>
  <div ngProjectAs="modal-body">
    this is body
  </div>
  <div ngProjectAs="modal-footer">
    <jack-button>this is footer button</jack-button>
  </div>
</jack-modal>

<jack-button  (click)='modal1.open()' >click me</jack-button>

<jack-table>sddjfi</jack-table>

<jack-tabs>
  this is jack tab
  <jack-tab-item label="first tab">helloworld.</jack-tab-item>
</jack-tabs>



<app-reactive-forms></app-reactive-forms>


<app-effective-tool></app-effective-tool>
